/**
 *
 * 底部栏
 *
 */
import React, {Component} from 'react';
import {Image} from 'react-native';
import {createBottomTabNavigator, TabNavigator} from 'react-navigation';

//导入展示页面
import Home from '../page/Home';
import Type from '../page/Type';
import ShopCar from '../page/ShopCar';
import Mine from '../page/Mine';

export default Tab = createBottomTabNavigator({
        //配置页面
        Home: {
            screen: Home,
            navigationOptions: {
                tabBarLabel: '首页',
                tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require('../image/ic_home.png')}
                        style={[{height: 24, width: 24}, {tintColor: tintColor}]}
                    />
                ),
            },
        },
        Type: {
            screen: Type,
            navigationOptions: {
                tabBarLabel: '分类',
                tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require('../image/ic_type.png')}
                        style={[{height: 24, width: 24}, {tintColor: tintColor}]}
                    />
                ),
            },
        },
        ShopCar: {
            screen: ShopCar,
            navigationOptions: {
                tabBarLabel: '购物车',
                tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require('../image/ic_shop_car.png')}
                        style={[{height: 24, width: 24}, {tintColor: tintColor}]}
                    />
                ),
            },
        },
        Mine: {
            screen: Mine,
            navigationOptions: {
                tabBarLabel: '我',
                tabBarIcon: ({tintColor}) => (
                    <Image
                        source={require('../image/ic_me.png')}
                        style={[{height: 24, width: 24}, {tintColor: tintColor}]}
                    />
                ),
            }
        },
    }, {
        //位置
        tabBarPosition: 'bottom',
        //是否使用动画
        animationEnabled: true,
        //允许标签间滑动
        swipeEnabled: true,
        //按下'back'键是否跳转到第一个Tab(首页),none为不跳转
        backEnabled: "none",

        //设置Tab属性
        tabBarOptions: {
            //是否标签使用大写，默认true
            upperCaseLabel: false,
            //显示图标
            showIcon: true,
            //显示文字
            showLabel: true,
            //选中状态下，icon和label颜色
            activeTintColor: '#4398ff',
            //默认状态下，icon和label颜色
            inactiveTintColor: 'gray',
            style: {
                //TabNevigator的背景颜色
                backgroundColor: 'white',
                height: 55,
            },
            indicatorStyle: {
                //指示器，若是顶部tab，则需要一条指示器，底部则不需要,height=0,相当于不使用
                height: 0,
            },
            labelStyle: {
                fontSize: 13,
                marginTop: -5,
                marginBottom: 5,
            },
            iconStyle: {
                marginBottom: 5,
            },

        },

    },
);

